<template>
  <div class="page-content">
    <div class="header-box">
    </div>
    <div class="content-container">
      <div class="left-box">
        <div class="left-one">
          <p class="tab-title1">基本信息</p>
          <div class="tab-part">
            <div class="part-item worker-number">
              <div class="">
                <img src="@/assets/imgs/screan/person_icon.png" alt="">
                <div>
                  <p class="txt">全体工作人员/人</p>
                  <p class="num1">{{ portraitBase.directorPeopleNum }}</p>
                </div>
              </div>
              <div>
                <img src="@/assets/imgs/screan/person_icon.png" alt="">
                <div>
                  <p class="txt">专职工作人员/人</p>
                  <p class="num2">{{ portraitBase.directorPeopleNum }}</p>
                </div>
              </div>
            </div>

            <div class="part-item base-info">
              <p>
                <span class="txt">业务主管单位</span>
                <span class="val">{{ portraitBase.supervisoryUnit }}</span>
              </p>
              <p>
                <span class="txt">业务范围</span>
                <span class="val">{{ portraitBase.businessScope }}</span>
              </p>
              <p>
                <span class="txt">成立时间</span>
                <span class="val">{{ portraitBase.establishTime }}</span>
              </p>
              <p>
                <span class="txt">邮政编码</span>
                <span class="val">{{ portraitBase.establishTime }}</span>
              </p>
              <p>
                <span class="txt">地址</span>
                <span class="val">{{ portraitBase.registerAddress }}</span>
              </p>
              <p>
                <span class="txt">对外公开电话</span>
                <span class="val">{{ portraitBase.establishTime }}</span>
              </p>
            </div>
            <!-- <div>
              <p class="">设立监事会</p>
            </div> -->
          </div>
        </div>

        <div class="left-twe">
          <p class="tab-title1">年检结果</p>
          <div class="result-box">
            <div v-for="(item, index) in portraitInspects">
              <p class="result-year">{{ item.examineYear }}年</p>
              <img :src="getImageSrc(item.approveStatus)" alt="">
            </div>
            <!-- <div>
              <p class="result-year">2019年</p>
              <img src="@/assets/imgs/screan/buhege.png" alt="">
            </div>
            <div>
              <p class="result-year">2019年</p>
              <img src="@/assets/imgs/screan/wnj.png" alt="">
            </div>
            <div>
              <p class="result-year">2019年</p>
              <img src="@/assets/imgs/screan/jbhg.png" alt="">
            </div>
            <div>
              <p class="result-year">2019年</p>
              <img src="@/assets/imgs/screan/hege.png" alt="">
            </div> -->
          </div>
        </div>

        <div class="left-three">
          <p class="tab-title1">财务管理情况</p>
          <div class="finance-box">
            <p v-for="(item, index) in finance">
              {{ `${item.examineYear}年：收入：${item.income} 万元，支出：${item.expenditure} 万元` }}
            </p>
          </div>
        </div>
      </div>
      <div class="center-box">
        <div class="center-one">
          <div>
            <p class="txt">社会组织</p>
            <p class="val">{{ orgData.organizationBaseName }}</p>
          </div>
          <div>
            <p class="txt">综合评分</p>
            <p>
              <span class="val point">{{ orgData.score }}</span>
              <span class="txt">分</span>
              <span style="margin-left: 20px;" class="txt">{{ orgData.scoreDescription }}</span>
            </p>
          </div>
        </div>
        <div class="center-twe">
          <img src="@/assets/imgs/screan/center_bg.png" alt="">
        </div>
        <div class="center-three">
          <p class="tab-title1">活动开展</p>
          <div class="active-list">
            <!-- <div class="single-active" v-for="item in portraitActivity">
              <div>
                <p>{{ item.accountNum }}</p>
              </div>
              <p class="active-name">{{ item.activityTypeName }}</p>
            </div> -->
            <div class="single-active">
              <div>
                <p>
                  <span>{{ portraitActivity.activityNum ?? 0 }}</span>
                  <span style="font-size: 16px;margin-left: 5px;">次</span>
                </p>
              </div>
              <p class="active-name">活动开展次数</p>
            </div>
            <div class="single-active">
              <div>
                <p><span>{{ portraitActivity.activityPeopleNum ?? 0 }}</span>
                  <span style="font-size: 16px;margin-left: 5px;">人</span>
                </p>
              </div>
              <p class="active-name">活动参与人数</p>
            </div>
            <div class="single-active">
              <div>
                <p><span>{{ portraitActivity.activityExpenses ?? 0 }}</span>
                  <span style="font-size: 16px;margin-left: 5px;">元</span>
                </p>
              </div>
              <p class="active-name">活动支出</p>
            </div>
            <div class="single-active">
              <div>
                <p>
                  <span>{{ portraitActivity.activityPraiseNum ?? 0 }}</span>
                  <span style="font-size: 16px;margin-left: 5px;">次</span>
                </p>
              </div>
              <p class="active-name">点赞总数</p>
            </div>
            <div class="single-active">
              <div>
                <p><span>{{ portraitActivity.activityPraiseRanking ?? 0 }}</span>
                  <span style="font-size: 16px;margin-left: 5px;">名</span>
                </p>
              </div>
              <p class="active-name">点赞总数排名</p>
            </div>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="right-one party-info">
          <p class="tab-title1">党组织信息</p>
          <div class="tab-part">
            <div class="part-item worker-number">
              <div class="">
                <img src="@/assets/imgs/screan/person_part_icon.png" alt="">
                <div>
                  <p class="txt">是否建立党组织</p>
                  <p class="num1">{{ portraitParty.partyMembersCount }}</p>
                </div>
              </div>
              <div class="">
                <img src="@/assets/imgs/screan/person_part_icon.png" alt="">
                <div>
                  <p class="txt">党员总人数</p>
                  <p class="num1">{{ portraitParty.partyMembersCount }}</p>
                </div>
              </div>
              <div>
                <img src="@/assets/imgs/screan/person_part_icon.png" alt="">
                <div>
                  <p class="txt">女性党员人数</p>
                  <p class="num2">{{ portraitParty.partyMembersWomanCount }}</p>
                </div>
              </div>
            </div>

            <div class="part-item  year-edu-number">
              <img src="@/assets/imgs/screan/year-old.png" alt="">
              <p>
                <span class="txt">35岁以下党员人数/人</span>
                <span class="val">{{ portraitParty.ageHirtyFiveCount }}</span>
              </p>
              <p>
                <span class="txt">36岁至45岁党员人数/人</span>
                <span class="val">{{ portraitParty.ageHirtySixCount }}</span>
              </p>
              <p>
                <span class="txt">45岁以上党员人数/人</span>
                <span class="val">{{ portraitParty.ageFortyFiveCount }}</span>
              </p>

              <!-- <img src="@/assets/imgs/screan/education.png" alt="">
              <p>
                <span class="txt">大专及以上党员人数/人</span>
                <span class="val">{{ portraitParty.schoolUniversityCount }}</span>
              </p>
              <p>
                <span class="txt">高中（中专）党员人数/人</span>
                <span class="val">{{ portraitParty.schoolHighCount }}</span>
              </p>
              <p>
                <span class="txt">初中以下党员人数/人</span>
                <span class="val">{{ portraitParty.schoolJuniorCount }}</span>
              </p> -->
            </div>
          </div>
        </div>
        <div class="right-twe">
          <p class="tab-title1">风险等级</p>
          <div class="trophy-list" v-for="item in awards">
            <div class="">
              <img src="@/assets/imgs/screan/trophy.png" alt="">
              <p class="trophy-bg">{{ item.awardName }}</p>
            </div>
          </div>
        </div>
        <div class="right-twe">
          <p class="tab-title1">获奖情况</p>
          <div class="trophy-list" v-for="item in awards">
            <div class="">
              <img src="@/assets/imgs/screan/trophy.png" alt="">
              <p class="trophy-bg">{{ item.awardName }}</p>
            </div>
          </div>
        </div>
        <div class="right-three">
          <div>
            <p class="tab-title_small">信用情况</p>
            <div>
              {{ ['守信', '失信'][portraitSupervision.creditSituation] }}
              {{ portraitSupervision.creditSituation }}
            </div>
          </div>
          <div>
            <p class="tab-title_small">行政处罚</p>
            <div>
              {{ ['未知', '有', '无'][portraitSupervision.administrativePenalty] }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import { ref, inject, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router';
import { portrait } from '@/api/evaluate/index'
// import from '@/assets/imgs/screan/buhege.png'

const route = useRoute();
const orgData = ref({});
//奖项
const awards = ref([]);
//
const portraitActivity = ref([]);
//基础信息
const portraitBase = ref({});
//党员年龄
const portraitParty = ref({});
//行政处罚
const portraitSupervision = ref({});
//历史年检
const portraitInspects = ref([]);
//财务
const finance = ref([]);


onMounted(() => {
  const query = route.query;
  portrait({ creditCode: query.creditCode }).then((res: any) => {
    orgData.value = res
    awards.value = res.awards
    portraitActivity.value = res.portraitActivity
    portraitBase.value = res.portraitBase
    portraitParty.value = res.portraitParty
    portraitSupervision.value = res.portraitSupervision
    portraitInspects.value = res.portraitInspects
    finance.value = res.finance
  })
})

const getImageSrc = (index) => {
  const myImg = ['hege', 'jbhg', 'buhege', 'wnj'][index]
  // 根据index返回不同的src路径
  return new URL("@/assets/imgs/screan/hege.png", import.meta.url).href;
}

// 引入图标
// const setSrc = (name?: string) => {
//   return new URL(`../../../../assets/menuIcon/${name}.svg`, import.meta.url)
//     .href
// }
</script>
<style lang="scss" scoped>
.page-content {
  width: 100%;
  // height: 1080px;
  background: url('@/assets/imgs/screan/page_bg.png') no-repeat;
  background-size: 100% 100%;
  overflow: hidden;

  .header-box {
    width: 100%;
    height: 78px;
    background: url('@/assets/imgs/screan/header_bg1.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 216px;
      height: 50px;
      margin-top: 15px;
    }
  }

  .content-container {
    height: 850px;
    padding: 0 20px;
    display: flex;

    .left-box {
      height: 900px;
      width: 490px;

      .left-one {
        // height: 510px;

        .tab-part {
          .worker-number {
            display: flex;
            justify-content: space-between;
            height: 60px;

            >div {
              display: flex;
              display: flex;
              justify-content: space-between;
              width: 195px;

              p {
                margin: 0;
                height: 30px;
                line-height: 30px;
              }

              .txt {
                color: #ACCCFE;
              }

              .num1 {
                background: -webkit-linear-gradient(#C8FFFF, #2AFFFF);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-size: 26px;
                font-weight: bold;
              }

              .num2 {
                background: -webkit-linear-gradient(#FFED75, #FFB922);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-size: 26px;
                font-weight: bold;
              }
            }
          }

          .base-info {
            margin-top: 20px;

            >p {
              display: flex;
              width: 100%;
              height: 36px;
              line-height: 36px;
              margin: 0;
              margin-bottom: 15px;
              padding: 0 20px;
              box-sizing: border-box;
              display: flex;
              // justify-content: space-between;
              background: url('@/assets/imgs/screan/kuang.png');

              .txt {
                width: 50%;
                font-family: AlibabaPuHuiTiR;
                font-size: 14px;
                color: #ACCCFE;
                letter-spacing: 2px;
              }

              .val {
                width: 50%;
                font-family: AlibabaPuHuiTiB;
                font-size: 14px;
                color: #FFF;
                letter-spacing: 2px;
                font-weight: bold;
                overflow: hidden;
              }
            }
          }
        }
      }

      .left-twe {
        .result-box {
          display: flex;
          flex-wrap: wrap;

          >div {
            width: 50%;

            .result-year {
              text-align: center;
              font-size: 18px;
              color: #ACCCFE;
              letter-spacing: 0;
              margin: 5px 0;
            }
          }
        }
      }

      .left-three {
        .finance-box {
          p {
            margin: 0;
            color: #fff;
            margin-top: 10px;
            height: 36px;
            line-height: 36px;
            margin: 0;
            margin-bottom: 15px;
            padding: 0 20px;
            box-sizing: border-box;
            background: url('@/assets/imgs/screan/kuang.png');
          }
        }
      }
    }

    .center-box {
      flex: 1;
      padding: 0 20px;

      .center-one {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;

        >div {
          width: 400px;
          height: 100px;
          background: url('@/assets/imgs/screan/light_line.png') no-repeat;
          background-size: 100% 100%;
          text-align: center;

          p {
            margin: 0;
          }

          .txt {
            font-weight: 500;
            font-size: 24px;
            color: #EBEBEB;
            background: -webkit-linear-gradient(#fff, #67C1FF);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin: 0;
            height: 50px;
            line-height: 50px;
          }

          .val {
            font-weight: 900;
            font-size: 30px;
            background: -webkit-linear-gradient(#fff, #67C1FF);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin: 0;

            &.point {
              margin-right: 5px;
            }
          }
        }
      }

      .center-twe {
        text-align: center;
        margin-top: 20px;

        img {
          width: 450px;
        }
      }

      .center-three {
        .active-list {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          margin-top: 20px;

          .single-active {
            margin-bottom: 10px;

            >div {
              background: url('@/assets/imgs/screan/active_bg.png') no-repeat;
              background-size: 100% 100%;
              width: 165px;
              height: 145px;
              text-align: center;

              p {
                height: 80px;
                line-height: 80px;
                font-family: AlibabaPuHuiTiB;
                font-size: 36px;
                background: -webkit-linear-gradient(#FFED75, #FFB922);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                margin: 0;
              }
            }

            .active-name {
              margin: 0;
              color: #ACCCFE;
              text-align: center;
              margin-top: -5px;
              font-size: 16px;
            }
          }
        }
      }
    }

    .right-box {
      width: 490px;
      height: 900px;

      .right-one {
        // height: 550px;

        .tab-part {
          .worker-number {
            display: flex;
            justify-content: space-between;
            height: 60px;

            >div {
              display: flex;
              // justify-content: space-between;
              width: 160px;


              img {
                width: 50px;
                height: 50px;
              }

              >div {
                padding-left: 10px;
              }

              p {
                margin: 0;
                height: 28px;
                line-height: 30px;
              }

              .txt {
                color: #ACCCFE;
                font-size: 14px;

              }

              .num1 {
                background: -webkit-linear-gradient(#C8FFFF, #2AFFFF);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-size: 22px;
                font-weight: bold;
              }

              .num2 {
                background: -webkit-linear-gradient(#FFED75, #FFB922);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-size: 26px;
                font-weight: bold;
              }
            }
          }

          .year-edu-number {
            margin-top: 20px;

            >p {
              display: flex;
              width: 100%;
              height: 40px;
              line-height: 40px;
              margin: 0;
              margin-bottom: 15px;
              padding: 0 20px;
              box-sizing: border-box;
              display: flex;
              // justify-content: space-between;
              background: url('@/assets/imgs/screan/kuang.png');

              .txt {
                width: 50%;
                font-family: AlibabaPuHuiTiR;
                font-size: 14px;
                color: #ACCCFE;
                letter-spacing: 2px;
              }

              .val {
                width: 50%;
                font-family: AlibabaPuHuiTiB;
                font-size: 16px;
                color: #FFF;
                letter-spacing: 2px;
                font-weight: bold;
              }
            }
          }
        }
      }

      .right-twe {
        .trophy-list {
          display: flex;
          flex-direction: column;

          >div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            img {
              width: 55px;
              height: 55px
            }

            .trophy-bg {
              width: 430px;
              height: 45px;
              line-height: 45px;
              padding-left: 10px;
              background: url('@/assets/imgs/screan/trophy_bg.png') no-repeat;
              background-size: 100% 100%;
              text-shadow: 0 0 4px #1ec6ffcc;
              color: #fff;
              font-size: 18px;
              margin: 0;
            }
          }
        }
      }

      .right-three {
        display: flex;
        justify-content: space-between;

        >div {
          width: 48%;
        }
      }
    }

    div {

      .tab-title1,
      .tab-title_small {
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding-left: 35px;
        box-sizing: border-box;
        color: #fff;
        background: url('@/assets/imgs/screan/tabs_title.png') no-repeat;
        background-size: 100% 100%;
      }

      .tab-title_small {
        background: url('@/assets/imgs/screan/tabs_title_small.png') no-repeat;
      }
    }
  }
}
</style>
